<template>
  <div class="newProductsPage">
    <div class="header">
      <div class="headerTitle">新品一览</div>
      <div class="headerDesc">点击图片可查看产品详情</div>
    </div>
    <div class="productCon">
      <div class="productImgCon" @click="productClick('F8')">
        <img src="../../../assets/wx/F8横版宣传图.jpg" alt="" />
      </div>
      <div class="productImgCon" @click="productClick('A5')">
        <img src="../../../assets/wx/A5横版宣传图.jpg" alt="" />
      </div>
      <div class="productImgCon" @click="productClick('E3')">
        <img src="../../../assets/wx/新E3-横.jpg" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    document.title = "新品一览";
  },
  methods: {
    productClick(e) {
      switch (e) {
        case "F8": {
          window.location.href = `https://s.wcd.im/v/co31Z73/?slv=1&sid=93fp&v=oosnVwjMtNxWDvtqKYoiQEZhhADU`;
          break;
        }
        case "A5": {
          window.location.href = `https://s.wcd.im/v/co31Z75/?slv=1&sid=93fp&v=oosnVwjMtNxWDvtqKYoiQEZhhADU`;
          break;
        }
        case "E3": {
          window.location.href = `https://s.wcd.im/v/co31Z76/?qr=`;
          break;
        }
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.newProductsPage {
  padding: 24px;
  .header {
    text-align: center;
    .headerTitle {
      font-size: 80px;
    }
    .headerDesc {
      font-size: 36px;
      padding: 24px 0;
    }
  }
  .productCon {
    .productImgCon {
      text-align: center;
      padding: 24px 0;
      img {
        width: 100%;
        display: block;
      }
    }
  }
}
</style>